﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>菜单导航管理</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/admin/css/icon/iconfont.css">
    <link rel="stylesheet" href="~/admin/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="iconfont icon-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统功能</el-breadcrumb-item>
                <el-breadcrumb-item>菜单导航</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="toolbar-box">
            <div class="list-box">
                <div class="l-list">
                    <el-button-group>
                        <el-button icon="el-icon-plus" @@click="linkUrl('navedit')">新增</el-button>
                        <el-button icon="el-icon-delete" @@click="deleteCheckAll">删除</el-button>
                    </el-button-group>
                </div>
                <div class="r-list">
                    <div class="search-box">
                        <el-input placeholder="输入关健字" v-model="keyword">
                            <el-button slot="append" icon="el-icon-search" @@click="initData"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>

        </div>

        <div class="content-box">
            <el-card class="table-card">
                <el-table ref="multipleTable" v-loading="loading" :data="listData" row-key="id" default-expand-all stripe
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" class="table-list" @@selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="45"></el-table-column>
                    <el-table-column label="标题" min-width="160">
                        <template slot-scope="scope">
                            <span class="grey">{{scope.row.id}}.</span>
                            <span>{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="标识" min-width="120"></el-table-column>
                    <el-table-column prop="linkUrl" label="链接" min-width="150"></el-table-column>
                    <el-table-column label="排序" width="120">
                        <template slot-scope="scope">
                            <el-input-number size="mini" v-model="scope.row.sortId" @@change="editSortId(scope.row.id, scope.row.sortId)" :min="-99999999" :max="99999999"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="显示" width="80" align="center">
                        <template slot-scope="scope">
                            <el-switch :active-value="0" :inactive-value="1" v-model="scope.row.status" @@change="editStatus(scope.row.id, scope.row.status)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="130">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" @@click="linkUrl('navedit?id='+scope.row.id)"></el-button>
                            <el-button size="mini" icon="el-icon-plus" @@click="linkUrl('navedit?parentId='+scope.row.id)"></el-button>
                            <el-button size="mini" type="danger" icon="el-icon-delete" @@click="deleteItem(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/admin/js/axios.config.js"></script>
    <script>
        //初始化VUE
        var vm = new Vue({
            el: '#app',
            data: {
                loading: false,
                keyword: '',
                listData: []
            },
            methods: {
                //加载数据
                initData: function () {
                    let _this = this;
                    let sendUrl = "/navigation";
                    if (_this.keyword.length > 0) {
                        sendUrl += "?keyword=" + encodeURI(_this.keyword);
                    }
                    AxiosAjax({
                        url: sendUrl,
                        beforeSend: function () {
                            _this.loading = true
                        },
                        success: function (res) {
                            _this.listData = res.data;
                        },
                        error: function (err) {
                            _this.listData = []
                        },
                        complete: function () {
                            _this.loading = false
                        }
                    });
                },
                //跳转链接
                linkUrl: function (url) {
                    window.location.href = url;
                },
                //多选删除
                deleteCheckAll: function () {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //拿到选中的数据
                    let list = _this.multipleSelection;
                    //检查是否有选中
                    if (list.length==0) {
                        _this.$message({ type: 'warning', message: '请选择要删除的记录！' });
                        return false;
                    }
                    //执行删除操作
                    _parent.$confirm('确认要删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'delete',
                            url: '/navigation?ids=' + list.toString(),
                            loading: true,
                            successMsg: '已删除成功',
                            success: function (res) {
                                //_this.$refs.treeList.setCheckedKeys([]); //清除选中状态
                                _this.initData(); //重新加载列表
                                if (parent.vm) parent.vm.initData(); //重新加载菜单
                            }
                        })
                    }).catch(function () { });
                },
                //单项删除
                deleteItem: function (val) {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //执行删除操作
                    _parent.$confirm('确认要删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'delete',
                            url: '/navigation/' + val,
                            loading: true,
                            successMsg: '已删除成功',
                            success: function (res) {
                                _this.initData();//重新加载列表
                                if (parent.vm) parent.vm.initData(); //重新加载菜单
                            }
                        });

                    }).catch(function () { });
                },
                //启用禁用操作
                editStatus: function (id, status) {
                    AxiosAjax({
                        method: 'patch',
                        url: '/navigation/' + id,
                        data: [{ "op": "replace", "path": "/status", "value": status }],
                        success: function (res) { }
                    });
                },
                //排序数字操作
                editSortId: function (id, sortId) {
                    AxiosAjax({
                        method: 'patch',
                        url: '/navigation/' + id,
                        data: [{ "op": "replace", "path": "/sortId", "value": sortId }],
                        success: function (res) { }
                    });
                },
                //选中第几行
                handleSelectionChange: function (val) {
                    if (val.length > 0) {
                        let idsArr = []
                        val.forEach(function (item, index) {
                            idsArr.push(item.id)
                        })
                        this.multipleSelection = idsArr;
                    }
                }
            },
            created: function () {
                //加载数据
                this.initData();
            }
        })
    </script>
</body>
</html>